<template>
	<div class="card-fill layout-padding" v-loading="loading" element-loading-text="Loading...">
		<el-card shadow="hover" class="layout-padding-auto create-form">
			<el-form ref="formRef" :model="stateData.vmModel" label-width="120px">
				<div class="form-section">
					<div class="section-title">
						<i class="_wtmicon _wtmicon-wxbzhanghu"></i>
						<span>关联信息</span>
					</div>

					<el-row :gutter="20">
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item ref="Entity_PoolId_FormItem" prop="Entity.PoolId">
								<template #label>
									<WtmLabelTooltip label="需求池" tooltip="关联的需求池主表" />
								</template>
								<el-select v-model="stateData.vmModel.Entity.PoolId" disabled class="width100">
									<el-option
										v-for="item in stateData.AllSysPurchaseRequirementPools"
										:key="item.Value"
										:value="item.Value"
										:label="item.Text"
									></el-option
								></el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item ref="Entity_RequestBillId_FormItem" prop="Entity.RequestBillId">
								<template #label>
									<WtmLabelTooltip label="采购申请单" tooltip="关联的采购申请单主表" />
								</template>
								<el-select v-model="stateData.vmModel.Entity.RequestBillId" disabled class="width100">
									<el-option v-for="item in stateData.AllSysPurchaseRequestBills" :key="item.Value" :value="item.Value" :label="item.Text"></el-option
								></el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item ref="Entity_RequestBillEntryId_FormItem" prop="Entity.RequestBillEntryId">
								<template #label>
									<WtmLabelTooltip label="申请单明细" tooltip="关联的采购申请单明细表" />
								</template>
								<el-select v-model="stateData.vmModel.Entity.RequestBillEntryId" disabled class="width100">
									<el-option
										v-for="item in stateData.AllSysPurchaseRequestBillEntrys"
										:key="item.Value"
										:value="item.Value"
										:label="item.Text"
									></el-option
								></el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</div>

				<div class="form-section">
					<div class="section-title">
						<i class="_wtmicon _wtmicon-wxbzhanghu"></i>
						<span>物料与数量</span>
					</div>

					<el-row :gutter="20">
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_MaterialId_FormItem"
								prop="Entity.MaterialId"
								:rules="[{ required: true, message: '物料为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="物料" tooltip="采购的物料" />
								</template>
								<WtmMaterialSelector v-model="stateData.vmModel.Entity.MaterialId" disabled class="width100" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item ref="Entity_MaterialSkuId_FormItem" prop="Entity.MaterialSkuId" label="MaterialSku">
								<el-select v-model="stateData.vmModel.Entity.MaterialSkuId" disabled class="width100">
									<el-option v-for="item in stateData.AllSysMaterialSkus" :key="item.Value" :value="item.Value" :label="item.Text"></el-option
								></el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</div>

				<div class="form-section">
					<div class="section-title">
						<i class="_wtmicon _wtmicon-wxbzhanghu"></i>
						<span>数量和金额</span>
					</div>

					<el-row :gutter="20">
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_RequestQuantity_FormItem"
								prop="Entity.RequestQuantity"
								:rules="[{ required: true, message: '申请数量为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="申请数量" tooltip="物料的申请采购数量" />
								</template>
								<el-input-number v-model="stateData.vmModel.Entity.RequestQuantity" disabled class="width100"></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_EstimatedPrice_FormItem"
								prop="Entity.EstimatedPrice"
								:rules="[{ required: true, message: '预计单价为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="预计单价" tooltip="预计采购单价" />
								</template>
								<el-input-number v-model="stateData.vmModel.Entity.EstimatedPrice" disabled class="width100"></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_BudgetAmount_FormItem"
								prop="Entity.BudgetAmount"
								:rules="[{ required: true, message: '预算金额为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="预算金额" tooltip="预算金额（申请数量×预计单价）" />
								</template>
								<el-input-number v-model="stateData.vmModel.Entity.BudgetAmount" disabled class="width100"></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item ref="Entity_PurchasedQuantity_FormItem" prop="Entity.PurchasedQuantity">
								<template #label>
									<WtmLabelTooltip label="已采购数量" tooltip="已下达采购订单的数量" />
								</template>
								<el-input-number v-model="stateData.vmModel.Entity.PurchasedQuantity" disabled class="width100"></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_RemainingQuantity_FormItem"
								prop="Entity.RemainingQuantity"
								:rules="[{ required: true, message: '剩余数量为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="剩余数量" tooltip="剩余待采购数量（申请数量-已采购数量）" />
								</template>
								<el-input-number v-model="stateData.vmModel.Entity.RemainingQuantity" disabled class="width100"></el-input-number>
							</el-form-item>
						</el-col>
					</el-row>
				</div>

				<div class="form-section">
					<div class="section-title">
						<i class="_wtmicon _wtmicon-wxbzhanghu"></i>
						<span>采购与申请信息</span>
					</div>

					<el-row :gutter="20">
						<el-col :xs="24" :lg="12" class="mb20">
							<WtmDeptSelector v-model="stateData.vmModel.Entity.GroupId" label="申请部门" tooltip="申请采购的部门" disabled />
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_RequestBy_FormItem"
								prop="Entity.RequestBy"
								:rules="[{ required: true, message: '申请人为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="申请人" tooltip="申请人" />
								</template>
								<el-input v-model="stateData.vmModel.Entity.RequestBy" disabled class="width100"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</div>

				<div class="form-section">
					<div class="section-title">
						<i class="_wtmicon _wtmicon-wxbzhanghu"></i>
						<span>采购类型</span>
					</div>

					<el-row :gutter="20">
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_PurchaseType_FormItem"
								prop="Entity.PurchaseType"
								:rules="[{ required: true, message: '采购类型为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="采购类型" tooltip="采购类型：常规、设备新增、安全新增等" />
								</template>
								<el-select v-model="stateData.vmModel.Entity.PurchaseType" disabled class="width100">
									<el-option key="常规" value="常规" label="常规"></el-option>
									<el-option key="设备新增" value="设备新增" label="设备新增"></el-option>
									<el-option key="安全新增" value="安全新增" label="安全新增"></el-option>
									<el-option key="其他" value="其他" label="其他"></el-option
								></el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_MaterialType_FormItem"
								prop="Entity.MaterialType"
								:rules="[{ required: true, message: '物料类型为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="物料类型" tooltip="物料类型：备品备件、化工小料、大宗原材料" />
								</template>
								<el-select v-model="stateData.vmModel.Entity.MaterialType" disabled class="width100">
									<el-option key="备品备件" value="备品备件" label="备品备件"></el-option>
									<el-option key="化工小料" value="化工小料" label="化工小料"></el-option>
									<el-option key="大宗原材料" value="大宗原材料" label="大宗原材料"></el-option
								></el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</div>

				<div class="form-section">
					<div class="section-title">
						<i class="_wtmicon _wtmicon-wxbzhanghu"></i>
						<span>紧急信息</span>
					</div>

					<el-row :gutter="20">
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item ref="Entity_UrgencyLevel_FormItem" prop="Entity.UrgencyLevel">
								<template #label>
									<WtmLabelTooltip label="紧急程度" tooltip="采购的紧急程度：一般、紧急" />
								</template>
								<el-select v-model="stateData.vmModel.Entity.UrgencyLevel" disabled class="width100">
									<el-option key="一般" value="一般" label="一般"></el-option>
									<el-option key="紧急" value="紧急" label="紧急"></el-option
								></el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</div>

				<div class="form-section">
					<div class="section-title">
						<i class="_wtmicon _wtmicon-wxbzhanghu"></i>
						<span>时间信息</span>
					</div>

					<el-row :gutter="20">
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_RequiredDeliveryDate_FormItem"
								prop="Entity.RequiredDeliveryDate"
								:rules="[{ required: true, message: '要求到货日期为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="要求到货日期" tooltip="要求的到货日期" />
								</template>
								<el-date-picker v-model="stateData.vmModel.Entity.RequiredDeliveryDate" disabled class="width100"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_ApprovalDate_FormItem"
								prop="Entity.ApprovalDate"
								:rules="[{ required: true, message: '审批通过日期为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="审批通过日期" tooltip="申请单最终审批通过的日期" />
								</template>
								<el-date-picker v-model="stateData.vmModel.Entity.ApprovalDate" disabled class="width100"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_EntryDate_FormItem"
								prop="Entity.EntryDate"
								:rules="[{ required: true, message: '入池日期为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="入池日期" tooltip="需求进入需求池的日期" />
								</template>
								<el-date-picker v-model="stateData.vmModel.Entity.EntryDate" disabled class="width100"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
				</div>

				<div class="form-section">
					<div class="section-title">
						<i class="_wtmicon _wtmicon-wxbzhanghu"></i>
						<span>采购状态</span>
					</div>

					<el-row :gutter="20">
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item
								ref="Entity_PurchaseState_FormItem"
								prop="Entity.PurchaseState"
								:rules="[{ required: true, message: '采购状态为必填项', trigger: 'blur' }]"
							>
								<template #label>
									<WtmLabelTooltip label="采购状态" tooltip="采购状态：待采购、部分采购、已采购" />
								</template>
								<el-select v-model="stateData.vmModel.Entity.PurchaseState" disabled class="width100">
									<el-option key="待立项" value="待立项" label="待立项"></el-option>
									<el-option key="立项中" value="立项中" label="立项中"></el-option>
									<el-option key="已立项" value="已立项" label="已立项"></el-option>
									<el-option key="已取消" value="已取消" label="已取消"></el-option
								></el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :lg="12" class="mb20">
							<el-form-item ref="Entity_PurchaseStrategy_FormItem" prop="Entity.PurchaseStrategy">
								<template #label>
									<WtmLabelTooltip label="采购策略" tooltip="采购策略：询比价、招投标、协议采购" />
								</template>
								<el-select v-model="stateData.vmModel.Entity.PurchaseStrategy" disabled class="width100">
									<el-option key="询比价" value="询比价" label="询比价"></el-option>
									<el-option key="招投标" value="招投标" label="招投标"></el-option>
									<el-option key="协议采购" value="协议采购" label="协议采购"></el-option
								></el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
			</el-form>
		</el-card>
	</div>
</template>

<!--suppress JSAnnotator -->
<script setup lang="ts" name="message._system.common.vm.edit;false">
import ElMessage from 'element-plus/es/components/message/index';
import { reactive, ref, getCurrentInstance, onMounted, computed, nextTick, ComponentInternalInstance } from 'vue';
import { SysPurchaseRequirementPoolEntryApi as api } from '/@/views/supplychain/syspurchaserequirementpoolentry/api';
import other from '/@/utils/other';
import { ISysPurchaseRequirementPoolEntryVm } from '/@/views/supplychain/syspurchaserequirementpoolentry/api/interface';
import { ISysSelectType, IViewModel } from '/@/types/common';

const BUTTON_TEXTS = {
	SAVE: '保存',
	SUBMIT: '提交',
	AGREE: '同意',
	REJECT: '拒绝',
	CLOSE: '关闭',
} as const;
const ci = getCurrentInstance() as ComponentInternalInstance;
const loading = ref(false);
const formRef = ref();
const stateData = reactive<IViewModel<ISysPurchaseRequirementPoolEntryVm>>({
	vmModel: {
		Entity: {
			ID: null,
			PoolId: null,
			RequestBillId: null,
			RequestBillEntryId: null,
			MaterialId: null,
			MaterialSkuId: null,
			RequestQuantity: null,
			EstimatedPrice: null,
			BudgetAmount: null,
			PurchasedQuantity: null,
			RemainingQuantity: null,
			GroupId: null,
			RequestBy: null,
			PurchaseType: null,
			MaterialType: null,
			UrgencyLevel: null,
			RequiredDeliveryDate: null,
			ApprovalDate: null,
			EntryDate: null,
			PurchaseState: null,
			PurchaseStrategy: null,
		},

		ActionName: null,
		IsMyApprove: null,
	},
	AllSysPurchaseRequirementPools: [] as ISysSelectType[],
	AllSysPurchaseRequestBills: [] as ISysSelectType[],
	AllSysPurchaseRequestBillEntrys: [] as ISysSelectType[],
	AllSysMaterials: [] as ISysSelectType[],
	AllSysMaterialSkus: [] as ISysSelectType[],
	AllSysGroups: [] as ISysSelectType[],
});

// 取消
const onClose = () => {
	closeDialog();
};

// 加载选择列表数据
const loadData = async () => {
	await Promise.allSettled([
		other
			.getSelectList('/api/SysPurchaseRequirementPoolEntry/GetSysPurchaseRequirementPools', [], false)
			.then((x) => (stateData.AllSysPurchaseRequirementPools = x)),
		other
			.getSelectList('/api/SysPurchaseRequirementPoolEntry/GetSysPurchaseRequestBills', [], false)
			.then((x) => (stateData.AllSysPurchaseRequestBills = x)),
		other
			.getSelectList('/api/SysPurchaseRequirementPoolEntry/GetSysPurchaseRequestBillEntrys', [], false)
			.then((x) => (stateData.AllSysPurchaseRequestBillEntrys = x)),
		other.getSelectList('/api/SysPurchaseRequirementPoolEntry/GetSysMaterials', [], false).then((x) => (stateData.AllSysMaterials = x)),
		other.getSelectList('/api/SysPurchaseRequirementPoolEntry/GetSysMaterialSkus', [], false).then((x) => (stateData.AllSysMaterialSkus = x)),
		other.getSelectList('/api/SysPurchaseRequirementPoolEntry/GetSysGroups', [], false).then((x) => (stateData.AllSysGroups = x)),
		api()
			.get(stateData.vmModel.Entity.ID ?? '')
			.then((x) => other.setValue(stateData.vmModel, x)),
	]);
};

const initializePageData = () => {
	const wtmdata = ci.attrs['wtmdata'] as any;
	if (wtmdata?.ID) {
		stateData.vmModel.Entity.ID = wtmdata.ID;
	}
};
// 页面加载时
onMounted(async () => {
	loading.value = true;
	initializePageData();

	try {
		// 并行加载选择列表数据
		await loadData();
	} catch (error) {
		other.setFormError(ci, error);
	} finally {
		loading.value = false;
		nextTick(() => {
			setupHeaderButtons();
		});
	}
});

// 定义子组件向父组件传值事件
const emit = defineEmits(['refresh', 'closeDialog', 'updateHeaderButtons']);

// 关闭弹窗
const closeDialog = () => {
	emit('closeDialog');
};

// 设置对话框头部按钮
const setupHeaderButtons = () => {
	const headerButtons = [
		{
			text: BUTTON_TEXTS.CLOSE,
			type: 'default',
			onClick: onClose,
			visible: true,
		},
	];
	emit('updateHeaderButtons', headerButtons);
};
</script>
